{% load static %}

<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" />
    <title>仪表盘示例</title>
   <style>
        body {
            font-family: 'Arial', sans-serif;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: flex-start;
            overflow-x: hidden;
            background-color: #f4f4f9;
            color: #333;
        }

        .container {
            width: 100%;
            height: auto;
            min-height: 100vh;
            max-width: calc(100vw - 40px);
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 0 20px;
            gap: 20px;
            margin: 20px auto;
            border-radius: 12px;
        }

        .card-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
            width: 100%;
        }

        .card {
            padding: 30px;
            position: relative;
            border-radius: 12px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            text-align: center;
            transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
        }

        .card:hover {
    transform: translateY(-5px); /* 用位移代替缩放 */
    z-index: 1; /* 保证悬停时覆盖其他元素 */
}

        .card-primary {
            background-color: #5cb85c;
            color: #fff;
        }

        .card-secondary {
            background-color: #3498db;
            color: #fff;
        }

        .card-tertiary {
            background-color: #f1c40f;
            color: #fff;
        }

        .card-quaternary {
            background-color: #ea6f5a;
            color: #fff;
        }

        .chart-container {
            width: 100%;
            height: 450px; /* 增加图表容器的高度 */
            display: flex;
            justify-content: space-between;
            gap: 20px;
            border-radius: 12px;
            background-color: #fff;
        }

        .chart-box {
            padding: 25px;
            border-radius: 12px;
            transition: transform 0.2s ease-in-out;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

        .chart-box-com {
            flex: 2;
        }

        .chart-box-pie {
            flex: 1;
        }

        .chart-box div {
            width: 100%;
            height: 100%; /* 确保高度自适应 */
            margin: auto;
        }


    </style>
</head>
<body>
<div class="container">
    <!-- 卡片部分 -->
    <div class="card-container">
        <div class="card card-primary">
            <h4><i class="fas fa-users"></i> 用户数量</h4>
            <p id="user-count">{{ users_count }}</p>
        </div>
        <div class="card card-secondary">
            <h4><i class="fas fa-user-clock"></i> 活跃用户比例</h4>
            <p id="active-user-percentage">{{ user_active_percentage }}%</p>
        </div>
        <div class="card card-tertiary">
            <h4><i class="fas fa-book"></i> 文章数量</h4>
            <p id="article-count">{{ articles_count }}</p>
        </div>
        <div class="card card-quaternary">
            <h4><i class="fas fa-comments"></i> 评论数量</h4>
            <p id="comment-count">{{ comments_count }}</p>
        </div>
    </div>

    <!-- 合并图表和饼状图部分 -->
    <div class="chart-container">
        <div class="chart-box-com chart-box" id="combinedChart">
            <div style="width: 100%; height: 450px;"></div>
        </div>
        <div class="chart-box-pie chart-box" id="pieChart">
            <div style="width: 100%; height: 450px;"></div>
        </div>
    </div>

    {% include 'admin/blog_home.html' %}
</div>

<script src="{% static 'echarts.min.js' %}"></script>
<script>
    document.addEventListener('DOMContentLoaded', function () {
        // 从 Django 模板传递数据给 JavaScript
        const usersMonthlyGrowth = {{ users_monthly_growth|safe }};
        const articlesMonthlyGrowth = {{ articles_monthly_growth|safe }};
        const user_active_percentage = {{ user_active_percentage }};
        const user_inactive_percentage = {{ user_inactive_percentage }};

        // 初始化合并图表
        const combinedChart = document.querySelector('#combinedChart div');
        const combinedChartInstance = echarts.init(combinedChart);
        const combinedChartOption = {
            title: {
                text: '【用户】与【文章】月度增长趋势',
                textStyle: {
                    fontSize: 18,
                    fontWeight: 'bold',
                    color: '#333',
                }
            },
            tooltip: {
                trigger: 'item',
                formatter: function (params) {
                    return params.seriesName + ':' + params.value;
                },
                textStyle: {
                    fontSize: 12
                },
                backgroundColor: 'rgba(255, 255, 255, 0.9)', // 背景颜色
                borderColor: '#333', // 边框颜色
                borderWidth: 1, // 边框宽度
                borderRadius: 4, // 边框圆角
                padding: [5, 10], // 内部间距
                width: 100, // 固定宽度，强制限制提示框的宽度
                extraCssText: `
                width: auto !important;
                max-width: 150px !important;
                height: auto !important;
                max-height: 100px !important;
                text-align: center;
                line-height: 1.5;
              `,
                alwaysShowContent: false, // 确保 hover 时才显示
            },
            legend: {
                data: ['月度用户增长', '月度文章数量'],
                top: '5%',
                left: 'center',
                textStyle: {
                    fontSize: 12
                }
            },
            xAxis: {
                type: 'category',
                data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
                axisLabel: {
                    fontSize: 12
                }
            },
            yAxis: [
                {
                    type: 'value',
                    name: '用户数量',
                    nameTextStyle: {
                        fontSize: 12
                    },
                    axisLabel: {
                        fontSize: 12
                    }
                },
                {
                    type: 'value',
                    name: '文章数量',
                    position: 'right',
                    nameTextStyle: {
                        fontSize: 12
                    },
                    axisLabel: {
                        fontSize: 12
                    }
                }
            ],
            series: [
                {
                    name: '用户数量',
                    type: 'line',
                    color: '#3498DB', // 配置线的颜色
                    data: usersMonthlyGrowth,
                    yAxisIndex: 0
                },
                {
                    name: '文章数量',
                    type: 'bar',
                    color: '#5CB85C', // 配置柱状图的颜色
                    data: articlesMonthlyGrowth,
                    yAxisIndex: 1
                }
            ],
            grid: {
                left: '3%',
                right: '4%',
                bottom: '15%', // 增加底部边距以适应标签
                containLabel: true
            }
        };

        combinedChartInstance.setOption(combinedChartOption);

        // 初始化饼状图
        const pieChart = document.querySelector('#pieChart div');
        const pieChartInstance = echarts.init(pieChart);
        const pieChartOption = {
            title: {
                text: '用户活跃度',
                textStyle: {
                    fontSize: 18,
                    fontWeight: 'bold',
                    color: '#333'
                }
            },
            tooltip: {
                trigger: 'item',
                formatter: function (params) {
                    return params.name + '<br/>' + params.value + '%';
                },
                textStyle: {
                    fontSize: 12
                },
                backgroundColor: 'rgba(255, 255, 255, 0.9)', // 背景颜色
                borderColor: '#333', // 边框颜色
                borderWidth: 1, // 边框宽度
                borderRadius: 4, // 边框圆角
                padding: [5, 10], // 内部间距，调整为更小的值
                width: 20, // 固定宽度，控制提示框的最大宽度
                extraCssText: `
                width: auto !important;
                max-width: 150px !important;
                height: auto !important;
                max-height: 100px !important;
                text-align: center;
                line-height: 1.5;
              `,
                alwaysShowContent: false // 鼠标悬停时显示完整内容
            },
            legend: {
                top: '5%',
                left: 'center',
                textStyle: {
                    fontSize: 12
                }
            },
            series: [
                {
                    name: '活跃度',
                    type: 'pie',
                    radius: '50%',
                    data: [
                        {value: user_active_percentage, name: '活跃用户', itemStyle: {color: '#3498DB'}},
                        {value: user_inactive_percentage, name: '非活跃用户', itemStyle: {color: '#F1C40F'}}
                    ],
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    },
                    label: {
                        fontSize: 12,
                    }
                }
            ]
        };

        pieChartInstance.setOption(pieChartOption);
    });
</script>
</body>
</html>
